<template>
  <div id="add">
    <!-- 头部 -->
    <div class="navebar">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="设备编号">
          <el-input
            v-model="formInline.taskCode"
            placeholder="请输入"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">
            查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格新建按钮 -->
    <div class="boxs">
      <!-- 表格 -->
      <div class="tabel bos">
        <el-table
          v-loading="loading"
          tooltip-effect="dark"
          :data="SearchList"
          style="width: 100%"
          :header-cell-style="{
            //标题头部的颜色
            background: '#f5f7fa',
            height: '45px',
          }"
        >
          <el-table-column fixed type="index" label="序号" width="100" />
          <el-table-column prop="innerCode" label="设备编号" width="170" />
          <el-table-column prop="type.name" label="设备型号" width="170" />
          <el-table-column prop="node.name" label="详细地址" width="170" />
          <el-table-column label="运营状态" width="170">
            <template #default="scope">
              {{ vm[scope.row.vmStatus] || "未知" }}
            </template>
          </el-table-column>
          <el-table-column label="设备状态" width="240">
            <template>
              <el-button
                class="ww"
                size="mini"
                type="warning"
                round
              >离线</el-button>
              <el-button
                class="suc"
                size="mini"
                type="success"
                round
              >货道</el-button>
              <el-button
                class="suc suc2"
                size="mini"
                type="success"
                round
              >传动轴</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="medium "
                @click="cargo(scope.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 实现分页
        current-page 当前页数
        page-size 每页显示个数
        total 总条目数
        current-change 页面改变时会触发
        prev-text="上一页"
        next-text="下一页"
         -->
        <div class="block">
          <el-pagination
            background
            :current-page.sync="pageOption.pageIndex"
            :page-size="pageOption.pagesize"
            layout="total,  pager, prev, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 查看详情弹出框 -->
    <div class="dils">
      <el-dialog
        title="设备详情"
        :visible.sync="deltacticsVisible"
        width="50%"
        @close="closeFn"
      >
        <!-- 表单内容 -->
        <div class="nave">
          <div class="border">
            <div>销售量: <span> {{ sales }}个</span></div>
            <div>销售额: <span>{{ salesVome }}万元</span></div>
            <div>补货次数: <span>0次</span></div>
            <div>维修次数: <span>0次</span></div>
          </div>
        </div>
        <el-descriptions :column="4">
          <el-descriptions-item label="商品销量">(月)</el-descriptions-item>
        </el-descriptions>
        <div class="commodity">
          <el-row>
            <el-col v-for="(item,index) in commodity" :key="index" :span="6"><div class="grid-content bg-purple bor"> <div class="borname">{{ item.skuName }} </div><span>: {{ item.count }}</span> </div></el-col>
          </el-row>
        </div>
        <!-- <div>当前设备为销售商品</div> -->
      </el-dialog>
    </div>

    <!-- 修改弹出框 -->
  </div>
</template>

<script>
import { searchDeviceList, getrepltApi, getMoneyApi, getTactApi } from '@/api'
import dayjs from 'dayjs'
import moment from 'moment'
export default {
  components: {},
  data() {
    return {
      loading: false,
      deltacticsVisible: false,
      SearchList: [], // 表格
      currentPage1: 10,
      total: 0,
      size: '',
      sales: '', // 销售额
      salesVome: '', // 销售量
      commodity: [], // 商品销量
      // 搜索框
      formInline: {
        taskCode: ''
      },
      // 搜索传入的数值
      pageOption: {
        pageIndex: 1,
        pagesize: 10
      },
      // 售货机状态枚举
      vm: {
        0: '未投放',
        1: '运营',
        3: '撤机'
      }
    }
  },
  async created() {
    this.getDeviceList()
  },
  methods: {
    // 搜索售货机列表
    async getDeviceList() {
      this.loading = true
      const { data } = await searchDeviceList(this.pageOption)
      this.SearchList = data.currentPageRecords
      this.total = +data.totalCount
      this.loading = false
    },

    // 设备编号查询功能
    // 绑定查询事件，在下面声明点击事件
    // 封装数据请求接口、引入、使用
    // 点击查询按钮，将数据传给子组件表格
    // 子组件接收，并进行数据请求实现查询功能
    async onSubmit() {
      console.log('submit!')
      this.loading = true
      this.pageOption.innerCode = this.formInline.taskCode
      const { data } = await searchDeviceList({
        ...this.pageOption,
        innerCode: this.formInline.taskCode
      })
      this.SearchList = data.currentPageRecords
      this.total = +data.totalCount
      this.loading = false
    },

    // 查看详情
    // 展示查看详情的弹窗组件
    // 获取上个月的时间戳、现在的时间戳
    // 传入当前行内容的开始、结束时间和售货机编号
    // 调用请求数据接口
    // 对请求回来的金额数据进行处理
    async cargo(val) {
      this.deltacticsVisible = true
      console.log(val)
      const params = {
        start: moment().subtract(1, 'month').format('YYYY-MM-DD hh:mm:ss'),
        end: this.formatDate(val.node.updateTime),
        innerCode: val.innerCode
      }
      const res = await getrepltApi(params)
      const res2 = await getMoneyApi(params)
      const res3 = await getTactApi({
        start: moment().subtract(1, 'month').format('YYYY-MM-DD'),
        end: this.formatDates(val.node.updateTime),
        innerCode: val.innerCode
      })
      this.sales = res.data
      this.salesVome = (res2.data / 10000).toFixed(2)
      this.commodity = res3.data
      console.log(res)
      console.log(res2)
      console.log(res3)
    },

    // 点击取消关闭弹窗、清除表单
    closeFn() {
      this.deltacticsVisible = false
    },

    // 格式化时间
    formatDate(value) {
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    },
    formatDates(value) {
      return dayjs(value).format('YYYY-MM-DD')
    },

    // 实现分页
    handleCurrentChange(val) {
      this.loading = true
      console.log(val)
      this.pageOption.pageIndex = val
      this.getDeviceList()
      this.loading = false
    }
  }
}
</script>

<style lang="scss">
#add {
  overflow: hidden;
  background-color: #f8fafd;
}
.navebar {
  margin: 20px 19px 0;
  padding-top: 14px;
  padding-left: 18px;
  height: 64px;
  background-color: #fff;
}
// 表格
.boxs {
  margin: 20px 19px 0;
  padding-left: 18px;
  background-color: #fff;
  overflow: hidden;
}
.el-table__header {
  background-color: #333;
}
// 按钮

.bos .el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 1px;
}
.ww {
  background-color: #ffb636;
  border: #f8fafd 1px;
  height: 22px;
  line-height: 6px;
  font-size: 14px;
  width: 45px;
}
.ww span,
.suc span {
  margin-left: -7px;
}
.suc {
  background-color: #47d498;
  border: #f8fafd 1px;
  height: 22px;
  margin-left: -10px;
  line-height: 6px;
  font-size: 14px;
  width: 45px;
}
.suc2 {
  width: 56px;
}
// 表格高度
.el-table .el-table__cell {
  padding: 3px 0 0 0;
}
// 分页器
.block {
  margin: 20px 0;
}
.tabel {
  margin-top: 19px;
}
.btn-prev {
  margin-left: 100px;
}
.dels .el-dialog__title{
  font-size: 14px;
  font-weight: 600;
}
// 弹窗
.nave{
  display: flex;
  text-align: center;
  line-height: 50px;
  height: 50px;
  margin-top: -18px;
  margin-bottom: 20px;
  // padding: 0 5px;
  background-color: #f4f6fb;
}
// 销售额表格
.commodity{
  display: inline-block;
  // display: flex;
  // overflow: hidden;
  // width: 604px;
}
.nave .border{
display: flex;
width: 100%;
}
.nave .border div{
  width: 26%;
  font-size: 14px;
  margin-left: -6px;
}
.nave .border span{
  margin-left: 15px;
  color: #5f84ff;
}
// 设备详情弹窗
.bor{
  display: flex;
  // text-align: center;
  height: 40px;
  float: left;
  line-height: 40px;
  width: 153px;
  padding: 0 10px;
  border: #d8dde3 1px solid;
}
.bor span{
  margin-left: 7px;
}
.borname{
  margin-left: 10px;
  width: 70px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
